<template>
  <el-container>
    <el-main style="padding: 0px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card  class="card-gradient users-card">
            <h3>Staff</h3>
            <p class="stat-value">1,024</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="card-gradient sales-card">
            <h3>Sales</h3>
            <p class="stat-value">$5,432</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="card-gradient orders-card">
            <h3>Orders</h3>
            <p class="stat-value">234</p>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <h3>Sales Overview</h3>
            <div id="line-chart" style="height: 400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <h3>Sales Channels</h3>
            <div id="pie-chart" style="height: 400px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { defineComponent, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'


// 渲染折线图
const renderLineChart = () => {
      const chartDom = document.getElementById('line-chart')
      if (chartDom) {
        const myChart = echarts.init(chartDom)
        const option = {
          title: {
            text: 'Sales Trend',
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: 'Sales',
              type: 'line',
              data: [150, 230, 224, 218, 135, 147],
            },
          ],
        }
        myChart.setOption(option)
      } else {
        console.error('Cannot find line-chart element.')
      }
    }

    // 渲染饼图
    const renderPieChart = () => {
      const chartDom = document.getElementById('pie-chart')
      if (chartDom) {
        const myChart = echarts.init(chartDom)
        const option = {
          title: {
            text: 'Sales Channels',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: 'Sales Channels',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Online' },
                { value: 735, name: 'Retail' },
                { value: 580, name: 'Direct' },
                { value: 484, name: 'Wholesale' },
                { value: 300, name: 'Other' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
        myChart.setOption(option)
      } else {
        console.error('Cannot find pie-chart element.')
      }
    }

    onMounted(() => {
      nextTick(() => {
        renderLineChart()
        renderPieChart()
      })
    })
</script>

<style scoped>
.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

#chart {
  width: 100%;
}
/* 渐变背景色样式 */
.card-gradient {
  color: white;
  border-radius: 10px;
  /* padding: 20px; */
}

.users-card {
  background: linear-gradient(45deg, #42a5f5, #478ed1);
}

.sales-card {
  background: linear-gradient(45deg, #66bb6a, #43a047);
}

.orders-card {
  background: linear-gradient(45deg, #ff7043, #d84315);
}
</style>
